<div id="yongzhoudriverinfo">
    <div class="full">
        <h3 class="h3-title">永州驾驶员基本信息</h3>
        <ul>
            <li>
                <i-input v-model.trim="queryParameter"></i-input>
            </li>
            <li>
                <i-button type="info" @click="handlerClickQuery">{{$t("reportForm.query")}}</i-button>
            </li>
            <li style="float: right;text-align: right;">
                <i-button type="primary" @click="handlerNewAdd">新增驾驶员信息</i-button>
            </li>
        </ul>
        <div class="table-wraper">
            <i-table border :columns="columns" :height="taleHeight" :data="tableData" :loading="loading"></i-table>
        </div>
        <Modal v-model="modal" width="900" :title="modalTile">
            <div style="width:700px;margin:10px auto">
                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">姓名 : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="name"></i-input>
                    </i-col>
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;性别 : &nbsp;</i-col>
                    <i-col span="8">
                        <i-select v-model.sync="sex">
                            <i-option value="1">男</i-option>
                            <i-option value="2">女</i-option>
                        </i-select>
                    </i-col>
                </Row>
                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">生日 : &nbsp;</i-col>
                    <i-col span="8">
                        <date-picker type="date" v-model="brith" style="width: 100%;"></date-picker>  
                    </i-col>
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;国籍 : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="nationality"></i-input>
                    </i-col>
                </Row>
                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">地址 : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="address"></i-input>
                    </i-col>
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;电话 : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="phone"></i-input>
                    </i-col>
                </Row>
                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">身份证 : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="idNumber"></i-input>
                    </i-col>
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;从业资格证类别 : &nbsp;</i-col>
                    <i-col span="8">
                        <i-select v-model.sync="certificateType">
                            <i-option value="1">巡游出租汽车驾驶员</i-option>
                            <i-option value="2">网约出租汽车驾驶员</i-option>
                            <i-option value="0">其他 </i-option>
                        </i-select>
                    </i-col>
                </Row>
                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">从业资格证号码 : &nbsp;</i-col>
                    <i-col span="8">  
                        <i-input v-model.trim="certificateNum"></i-input>
                    </i-col>
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;准驾车型 : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="driverType"></i-input>
                    </i-col>
                </Row>
                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">资格证初始领证日期:</i-col>
                    <i-col span="8">
                        <date-picker type="date" v-model="initialDate" style="width: 100%;"></date-picker>  
                    </i-col>
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">资格证有效起始日期:</i-col>
                    <i-col span="8">
                        <date-picker type="date" v-model="effectiveDate" style="width: 100%;"></date-picker>  
                    </i-col>
                </Row>
                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">驾驶车辆车牌: &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="relateVehicleNum"></i-input>
                    </i-col>
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;核发机关 : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="issuOrganization"></i-input>
                    </i-col>
                </Row>
            </div>
            <div slot="footer" style="text-align: center;">
                <i-button style="width:480px" type="primary" @click="handleSubmit">{{$t("bgMgr.submit")}}</i-button>
            </div>
        </Modal>
    </div>
    <script>
        vueInstanse = new Vue({
            el: "#yongzhoudriverinfo",
            i18n: utils.getI18n(),
            data: {

                name:'',//名字' ,
                sex:'1',//男 女' ,
                brith:new Date(),//生日 yyyyMMdd ,
                nationality:'中国',//国籍,默认中国,
                address:'',//地址' ,
                phone:'',//电话' ,
                idNumber:'',//身份证' ,
                certificateType:'1',//1:巡游出租汽车驾驶员\r\n2：网约出租汽车驾驶员\r\n0：其他' ,
                certificateNum:'',//从业资格证号码' ,
                driverType:'',//准驾车型' ,
                initialDate:new Date(),//资格证初始领证日期' ,
                effectiveDate:new Date(),//资格证有效起始日期' ,
                issuOrganization:'',//核发机关' ,
                relateVehicleNum:'',//驾驶车辆车牌号码
    
                isEdit:false,
                modal: false,
                queryParameter: "",
                loading: true,
                columns: [
                        {
                            title: vRoot.$t("bgMgr.action"),
                            key: 'action',
                            width: 130,
                            render: function(h, params) {
                                return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: function() {
                                                editObject = params.row;
                                                vueInstanse.isEdit = true;
                                                vueInstanse.modal = true;
                                                vueInstanse.setRowInfo(editObject);
            
                                            }
                                        }
                                    }, vRoot.$t("bgMgr.edit")),

                                    h('Poptip', {
                                        props: {
                                            confirm: true,
                                            title: vRoot.$t("message.confirmDel")
                                        },
                                        style: {
                                            marginRight: '5px',
                                        },
                                        on: {
                                            'on-ok': function() {
                                                vueInstanse.handleDelete(params);
                                            }
                                        }
                                    }, [
                                        h('Button', {
                                            props: {
                                                type: 'error',
                                                size: 'small'
                                            }
                                        }, vRoot.$t("bgMgr.delete"))
                                    ]),
                                ]);
                            }
                    },
                    {
                        title: '姓名',key: 'name', width:100,
                    }, 
                    {
                        title: '性别', width:80,
                        render:function(h,params) {
                            var sex = params.row.sex;
                            var str = '';
                            switch (sex) {
                                case 1:
                                    str = '男';
                                    break;
                                case 2:
                                    str = '女';  
                                    break;
                            }
                            return h('span',{},str);
                        },
                    }, 
                    {
                        title: '国籍',key: 'nationality', width:100,
                    }, 
                    {
                        title: '地址',key: 'address', width: 90,
                    }, 
                    {
                        title: '电话',key: 'phone', width:160,
                    }, 
                    { 
                        title: '身份证',key: 'idNumber', width:120,
                    }, 
                    {
                        title: '从业资格证类别',key: 'certificateType', width:160,
                    },
                    {
                        title: '从业资格证号码',key: 'certificateNum', width:160, 
                    },
                    {
                        title: '准驾车型',key: 'driverType', width:160,
                    },
                    {
                        title: '资格证初始领证日期',key: 'initialDate', width:160,
                    },
                    {
                        title: '资格证有效起始日期',key: 'effectiveDate', width:160,
                    },
                    {
                        title: '核发机关',key: 'issuOrganization', width:160,
                    },
                    {
                        title: '驾驶车辆车牌号码',key: 'relateVehicleNum', width:160,
                    }
                ],
                tableData: [],
                taleHeight: 300,
            },
            methods: {
                setRowInfo:function(row){
                    this.name=row.name;
                    this.sex=String(row.sex);
                    this.brith= new Date(row.brith);
                    this.nationality=row.nationality;
                    this.address=row.address;
                    this.phone=row.phone;
                    this.idNumber=row.idNumber;
                    this.nacertificateTypeme=String(row.certificateType);
                    this.certificateNum=row.certificateNum;
                    this.driverType=row.driverType;
                    this.initialDate=new Date(row.initialDate);
                    this.effectiveDate=new Date(row.effectiveDate);
                    this.issuOrganization=row.issuOrganization;
                    this.relateVehicleNum=row.relateVehicleNum;
                },
                handlerNewAdd:function(){
                    this.isEdit = false;
                    this.modal = true;
                },
                handlerClickQuery() {
                   this.queryYongZhouDriver();
                },
                handleDelete: function(params) {
                    var me = this;
                    var url = myUrls.deleteYongZhouDriver();
                    var data = {
                        drivers:[params.row.driverId],
                    }
                    utils.sendAjax(url,data,function(resp){
                        if(resp.status === 0){
                            me.$Message.success("删除成功");
                            me.$delete(me.tableData,params.index);
                        }else{
                            me.$Message.error(resp.cause);
                        }
                    });
                },
                calcTableHeight: function() {
                    var wHeight = window.innerHeight;
                    this.taleHeight = wHeight - 148;
                },
                handleSubmit: function() {
                    var me = this;
                    var url = '';
                    var data = {
                        name:this.name,//名字' ,
                        sex:Number(this.sex),//男 女' ,
                        brith:DateFormat.format(this.brith,'yyyy-MM-dd') + " 00:00:00",//生日 yyyyMMdd ,
                        nationality:this.nationality,//国籍,默认中国,
                        address:this.address,//地址' ,
                        phone:this.phone,//电话' ,
                        idNumber:this.idNumber,//身份证' ,
                        certificateType:Number(this.certificateType),//1:巡游出租汽车驾驶员\r\n2：网约出租汽车驾驶员\r\n0：其他' ,
                        certificateNum:this.certificateNum,//从业资格证号码' ,
                        driverType:this.driverType,//准驾车型' ,
                        initialDate:DateFormat.format(this.initialDate,'yyyy-MM-dd') + " 00:00:00",//资格证初始领证日期' ,
                        effectiveDate:DateFormat.format(this.effectiveDate,'yyyy-MM-dd') + " 00:00:00",//资格证有效起始日期' ,
                        issuOrganization:this.issuOrganization,//核发机关' ,
                        relateVehicleNum:this.relateVehicleNum,//驾驶车辆车牌号码
                        creater:userName//创建者' , 
                    };
                    if(this.isEdit){
                        data.operateFlag = 2;
                        data.driverId = editObject.driverId;
                        url = myUrls.editYongZhouDriver();
                    }else{
                        data.operateFlag = 1;
                        url = myUrls.createYongZhouDriver();
                    };
           
                    utils.sendAjax(url,data,function(resp){
                        if(resp.status == 0){
                            if(me.isEdit){
                                Object.assign(editObject,data);
                                me.$Message.success('编辑成功');
                            }else{
                                me.queryYongZhouDriver();
                                me.$Message.success('新增成功');
                             
                            }
                            me.modal = false;
                        }else{
                            me.$Message.error(resp.cause);
                        }
                    });
                },
                queryYongZhouDriver:function(){
                    var me = this;
                    var url = myUrls.queryYongZhouDriver();
                    var data = {
                        creater:userName,
                        keyword:this.queryParameter,
                    };
                    me.loading = true;
                    utils.sendAjax(url,data,function(resp){
                        me.loading = false;
                        if(resp.status == 0){
                            me.tableData = resp.drivers;
                        }
                    });
                },
            },   
            computed: {
                modalTile:function(){
                    return this.isEdit ? '编辑驾驶员信息' : '新增驾驶员信息';
                },
            },
            mounted: function() {
                var me = this;
                me.calcTableHeight();
                me.queryYongZhouDriver();
                window.onresize = function() {
                    me.calcTableHeight();
                }
            }
        })
    </script>
</div>